/*
 * @Author: yxiawen
 * @Date: 2022-05-13 16:12:20
 * @LastEditTime: 2022-05-30 08:51:06
 * @LastEditors: yxiawen
 * @Description:
 * @FilePath: /iceVite/src/pages/Backend/PlaneMgt/LeftMenuView/tree.tsx
 */
import { useEffect, useState } from 'react';
import styles from './tree.module.scss';
import { useSetState, useMount } from 'ahooks';
import { PlusSquareOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import getTreeData from '@/services/getTreeData';

interface Props {
  isShowChildren: boolean;
  childrenIndex: number;
}
interface TreeListProps {
  treeList: any[];
}
const Tree = () => {
  const [{ isShowChildren, childrenIndex }, setStyleState] = useSetState<Props>({
    isShowChildren: true,
    childrenIndex: 0,
  });
  const [{ treeList }, setTableState] = useState<TreeListProps>({
    treeList: [],
  });
  const ClickTitle = (childId) => {
    setStyleState({ isShowChildren: !isShowChildren, childrenIndex: childId });
  };
  useMount(async () => {
    getTreeDataRequest();
  });
  const getTreeDataRequest = () => {
    getTreeData.getTreeList().then((res) => {
      setTableState({ treeList: res });
    });
  };
  return (
    <div>
      {treeList.map((item): any => {
        return (
          <div className={styles.tree} key={item.id}>
            <div className={`${styles.treeTitle} ${childrenIndex === parseInt(item.id, 8) ? styles.active : ''}`}>
              <span onClick={() => ClickTitle(parseInt(item.id, 8))}>{item.plan}</span>
              <div className={`${styles.iconWrap} ${childrenIndex === parseInt(item.id, 8) ? styles.show : ''}`}>
                <PlusSquareOutlined />
                <FormOutlined />
                <DeleteOutlined />
              </div>
            </div>
            <ul className={childrenIndex === parseInt(item.id, 8) ? styles.show : ''}>
              {item.childs.map((children): any => {
                return (
                  <li key={children.id}>
                    {children.plan}
                    <div className={`${styles.iconWrap} ${childrenIndex === parseInt(item.id, 8) ? styles.show : ''}`}>
                      <PlusSquareOutlined />
                      <FormOutlined />
                      <DeleteOutlined />
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
        );
      })}
    </div>
  );
};

export default Tree;
